<template>
  <!--锁定-->
  <div class="foot_div">
    <div class="foot_in">
      <div class="foot_in_left">
        <span class="right_title">{{$t('m.Jiaoyispace')}}</span>
        <div class="footle_d">
          <div :class="disbg ? 'bg1' : ''" @click="xuanyl(1)">{{$t('m.Fushidian')}}</div>
          <div :class="disbg ? '' : 'bg1'" @click="xuanyl(2)">{{$t('m.Fushilian')}}</div>
        </div>
      </div>
      <div class="foot_in_right">
        <div class="right_one">
          <div class="right_title">{{$t('m.Jiaoyixiwei')}}</div>
          <select style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;">
            <option>{{$t('m.Fushictp')}}</option>
          </select>
        </div>
        <div class="right_one">
          <div class="right_title">{{$t('m.Customernumber')}}</div>
          <input v-model="param.username" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" disabled="disabled" />
        </div>
        <div class="right_one">
          <div class="right_title">{{$t('m.Jiaoyipsw')}}</div>
          <input v-model="param.password" type="password" style="width:155px;height:22px;margin-left: 8px;border-radius: 3px;" />
        </div>
        <div class="right_two">
          <button class="bott_on" @click="btnclick && unlock()">{{$t('m.Unlock')}}</button>
          <button class="bott_on" @click="btnclick1 && tuichu()">{{$t('m.Tuichu')}}</button>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: flex-start;width:25rem;">
      <div style="color:#0000FF;">{{ ccc }}</div>
    </div>
    <div class="looding" v-if="!btnclick">{{$t('m.LoginTips1')}}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    userInfo: state => state.userInfo /* 用户信息 */
  }),
  created: function() {
    var that = this;
    that.getuser();
    // that.getcicc();
  },
  data() {
    return {
      disbg: true /*背景色 */,
      btnclick: true /* 按钮功能 */,
      btnclick1: true /* 按钮功能 */,
      param: {
        username: '--', //账户
        password: '',
        group: 'pc'
      },
      aaa: '',
      bbb: '',
      ccc: this.$t('m.Ccctips')
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    /* 判断网络*/
    xuanyl(val) {
      if (val == 1) {
        this.disbg = true;
      } else if (val == 2) {
        this.disbg = false;
      }
    },
    getuser() {
      //获取账户信息
      // this.param.username = this.userInfo.username;
      this.param.username = this.userInfo.username;
      if (!this.userInfo.username || this.userInfo.username == undefined) {
        let account = localStorage.getItem('siteName');
        this.param.username = account;
      }
    },
    /* 解锁*/
    unlock() {
      this.btnclick = false;
      var that = this;
      if (that.password == '') {
        this.btnclick = true;
        return (that.ccc = this.$t('m.Shurupsw'));
      }
      this.$post('v1/site/login-name', this.param).then(res => {
        this.btnclick = true;
        // console.log(res);
        if (res.code == 200 && res.data.access_token) {
          localStorage.removeItem('_token');
          localStorage.removeItem('siteName');
          this.$svcInvoke.setConf('_token', res.data.access_token);
          localStorage.setItem('_token', res.data.access_token);
          localStorage.setItem('siteName',res.data.member.username);
          this.$store.commit('set', { userInfo: res.data.member });
          this.$store.commit('set', { bottomlist: 'footlogin' });
          this.param.password = '';
          this.$notify.success(this.$t('m.Xianlusuccess'));
        } else {
          this.$notify.error(res.message || this.$t('m.Loginfail'));
        }
      });
    },
    /* 退出登录 */
    tuichu() {
      this.btnclick1 = false
	  var this_ = this
      this.$confirm(this_.$t('m.Exittips'), this_.$t('m.Tips'), {
        confirmButtonText: this_.$t('m.Checkbtn'),
        cancelButtonText: this_.$t('m.Cancelbtn'),
        type: 'warning'
      })
        .then(({ value }) => {
          this.btnclick1 = true;
          this.$store.commit('set', { bottomlist: 'footnav' });
          this.$store.commit('set', { isinclass: 2 });
          this.$store.commit('set', { navtopheight: 100 });
          localStorage.removeItem('_token');
          this.$svcInvoke.setConf('_token', '');
          this.$router.push({
            path: '/'
          });
        })
        .catch(() => {
          this.btnclick1 = true;
          this.$notify({
            type: 'info',
            message: this_.$t('m.Cancelexit')
          });
        });
    }
  }
};
</script>

<style scoped="scoped">
/* 提示弹窗*/
.looding {
  position: fixed;
  top: 300px;
  left: 50%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  padding: 10px;
}

/* 颜色设置 */

.isbg {
  background-color: #ffffff;
}
.bg1 {
  background-color: #3399ff;
  color: #ffffff;
}

.foot_div {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.foot_in {
  width: 500px;
  height: 160px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.foor_bot {
  width: 500px;
  height: 20px;
  margin: 0px auto;
  text-align: left;
  color: #0000ff;
}

.foot_in_left {
  width: 40%;
  height: 160px;
  padding: 10px;
  box-sizing: border-box;
}

.footle {
  width: 100%;
  text-align: left;
}

.footle_d {
  margin-top: 6px;
  width: 160px;
  height: 95px;
  border: #828790 solid 1px;
  cursor: default;
}

.foot_in_right {
  width: 60%;
  height: 160px;
  box-sizing: border-box;
  padding: 10px 0;
}
.foot_in_right_title {
  width: 100%;
}
.right_one {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
}

.right_title {
  width: 90px;
}

.right_two {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
  box-sizing: border-box;
  padding-left: 20px;
}

.bott_on {
  margin-right: 10px;
  width: 80px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: #707070 solid 1px;
}
.codediv {
  width: 85px;
  height: 20px;
  margin-left: 8px;
  background-color: #c8c8c8;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00bfff;
  font-weight: 600;
  font-size: 12px;
}
</style>
